<template>
<view class="page">
	<view class="top">
		<view class="top-img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="user-iccid">
			<view class="iccid">{{dataObj.virtualNo}}</view>
			<view class="user-status">
				<text>{{text}}</text>
				<text>{{dataObj.cardStateName }}</text>
			</view>
			<view class="u-switch" @click="popupShow">卡板切换</view>
			
			<view class="u-switch u-p" @click="toAddSim"> <u-icon name="plus-circle" color="#fff" style="margin-right:4px;"></u-icon> 添加卡板</view>
		</view>
	</view>
	<view class="pack">
		<view class="u-top">
			<view class="total">
				总流量 <text>{{dataObj.flowRate / 1024 || 0}}G</text>
			</view>
			<view class="date">过期时间：{{dataObj.endTimeString}}</view>
		</view>
		<u-line-progress :percentage="(dataObj.usedFlowRate / dataObj.flowRate) * 100" :showText="false" activeColor="#397EF5"></u-line-progress>
		<view class="u-top">
			<view class="total">
				剩余流量<text>{{  dataObj.flowRate? fluxMtoG(dataObj.flowRate -dataObj.usedFlowRate) : 0}}G</text>
			</view>
			<view class="total">
				已用流量<text>{{ dataObj.usedFlowRate ? fluxMtoG(dataObj.usedFlowRate) : 0}}G</text>
			</view>
		</view>
	</view>
	<view class="pack-detail">
		<view class="title">在用套餐详情</view>
		<block v-if="dataObj.simPackageList.length > 0">
			<view class="u-bot" v-for="(item,index) in dataObj.simPackageList" :key="index">
				<view class="u-top">
					<view class="total">
						套餐 <text>{{item.packageName}}</text>
					</view>
					<view class="date">过期时间：{{item.endTimeString}}</view>
				</view>
				<u-line-progress :percentage="(item.usedFlowRate / item.flowRate) * 100" :showText="false" activeColor="#397EF5"></u-line-progress>
				<view class="u-top">
					<view class="total">
						剩余流量<text>{{  fluxMtoG(item.flowRate - item.usedFlowRate) }}G</text>
					</view>
					<view class="total">
						已用流量<text>{{ fluxMtoG(item.usedFlowRate)}}G</text>
					</view>
				</view>
			</view>
		</block>
		<view class="pack-btn" v-else @click="togo">订购套餐</view>
	</view>
	<view class="pack-detail" style="margin-bottom:120upx;">
		<view class="title">次月套餐详情</view>
		<block v-if="dataObj.simNextPackageList.length > 0">
			<view class="u-bot" v-for="(item,index) in dataObj.simNextPackageList" :key="index">
				<view class="u-top">
					<view class="total">
						套餐 <text>{{item.packageName}}</text>
					</view>
					<view class="date">过期时间：{{item.endTimeString}}</view>
				</view>
				<u-line-progress :percentage="(item.usedFlowRate / item.flowRate) * 100" :showText="false" activeColor="#397EF5"></u-line-progress>
				<view class="u-top">
					<view class="total">
						剩余流量<text>{{  fluxMtoG(item.flowRate - item.usedFlowRate) }}G</text>
					</view>
					<view class="total">
						已用流量<text>{{ fluxMtoG(item.usedFlowRate)}}G</text>
					</view>
				</view>
			</view>
		</block>
		<view class="pack-btn" v-else  @click="togo">订购套餐</view>
	</view>
	<u-popup :show="show" mode="center" class="popup1">
		<view class="popup-title">切换卡板</view>
		<view class="iccid-list">
			<view class="iccid-items" :class="{'active': activeObj.cardNo === item.cardNo}" v-for="item in dataList" :key="item.cardNo" @click="change(item)">{{item.cardNo}}</view>
		</view>
		<view class="popup-btn">
			<view class="popupClose" @click="close">取消</view>
			<view class="popupSave" @click="save">确认</view>
		</view>
	</u-popup>
	<u-popup :show="uShow" mode="center"  @close="close1"  :round="10" class="popupw">
		<view class="title">提示</view>
		<view class="massage">{{msg}}</view>
		<view class="btn-flex">
			<u-button  shape="circle" @click="close1">取消</u-button>
			<u-button type="primary" shape="circle" @click="sumbit">确认</u-button>
		</view>
	</u-popup>
</view>
</template>
<script>
export default{
	data(){
		return{
			saleType:uni.getStorageSync('saleType'),
		    giveSimAccount:uni.getStorageSync('giveSimAccount'),
			show:false,
			text:"",
			code:'',
			msg:'',
			uShow:false,
			dataObj:{
				simPackageList:[],
				simNextPackageList:[]
			},
			activeObj:{},
			dataList:[]
		}
	},
	onShow() {
		this.$api.authUrl({iccid:uni.getStorageSync('iccid') || '', supplierCode:uni.getStorageSync('userInfo').supplierCode || ''}).then(res=>{
			if(res.code === '200'){
				this.text = '已实名'
			}else{
				this.text = '未实名'
			}
		})
		this.dataList = []
		this.dataObj = {
			simPackageList:[],
			simNextPackageList:[]
		}
		this.$api.iccidList({userPhone:uni.getStorageSync('userPhone') || ''}).then(res=>{
			this.dataList = res.data || []
		})
		this.init(uni.getStorageSync('iccid') || '')
	},
	methods:{
		toAddSim(){
			uni.navigateTo({
				url:'/pages/bindingCard/index'
			})
		},
		fluxMtoG(data){
			return this.$utils.fluxMtoG(data)
		},
		init(iccid){
			this.$api.userInfo({iccid}).then(res=>{
				if(res.code === '200'){
					this.dataObj = res.data
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		//弹窗确认
		sumbit(){
			// code=400 卡号不存在提醒，弹窗 message信息， 用户点击 确认，跳转绑定卡号页面
			// code=401 购买优惠券提醒，弹窗 message信息， 用户点击 确认，跳转购买赠送金页面
			// code=402 购买套餐提醒，弹窗 message信息， 用户点击 确认，跳转购买套餐页面
			// code=403 实名提醒，弹窗 message信息， 用户点击 确认，调用 10的接口进行跳转
			if(this.code === '400'){
				uni.navigateTo({
					url:'/pages/bindingCard/index'
				})
			}else if(this.code === '401'){
				if(this.saleType==20){ // 赠送20元余额页面
					this.$utils.navigateTo('/pages/user/simAllOpenThree')
				}else {
					this.$utils.navigateTo('/pages/user/simOpens')
				}
			}else if(this.code === '402'){
				uni.navigateTo({
					url:'/pages/trafficPacket/index'
				})
			}else if(this.code === '403'){
				this.communicate()
			}else {
				this.uShow = false
			}
		},
		close() {
			this.show = false
			// console.log('close');
		},
		close1() {
			this.uShow = false
			// console.log('close');
		},
		popupShow(){
			this.activeObj = {}
			this.show = true
		},
		change(data){
			this.activeObj = data
		},
		save(){
			this.init(this.activeObj.iccid)
			this.nextClick(this.activeObj.iccid);
			uni.setStorageSync('iccid',this.activeObj.iccid)
			this.show = false
		},
		
		nextClick(iccid){
			var params = {
				userPhone:uni.getStorageSync('userPhone'),
				iccid:iccid
			}
			var arr = ['iccid','phoneNo','virtualNo','supplierCode','basePkgGroup','salePrice','imgUrl','payPrice','giveSimAccount']
			this.$api.simLogin(params).then(res=>{
				if(res.code === '200'){
					//缓存数据，后面会用到
					arr.forEach(item=>{
						uni.setStorageSync(item,res.data[item])
					})
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		
		
		togo(){
			var params ={
				iccid:uni.getStorageSync('iccid') || '',
				basePkgGroup:uni.getStorageSync('userInfo').basePkgGroup || ''
			}
			this.$api.menunPorwer(params).then(res=>{
				if(res.code === '400' || res.code === '401' ){
					this.code = res.code
					this.msg = res.message
					this.uShow = true
				}else {
					uni.navigateTo({
						url:'/pages/trafficPacket/index'
					})
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
.page{
	background: #F6FAFF;
	.top{
		height:154px;
		background: linear-gradient(180deg, #3980F9 0%, #2188FF 65%, rgba(247,250,255,0) 100%);
		display: flex;
		padding:14px;
		position:relative;
		.top-img{
			width:104upx;
			height:104upx;
			margin-right:22upx;
			image{
				width:100%;
				height:100%;
			}
		}
		.u-switch{
			color:#fff;
			font-size:28upx;
			font-family: PingFangSC, PingFang SC;
			background: url('../../static/img/icon25.png')no-repeat left center;
			background-size:30upx 28upx;
			padding-left:32upx;
			position: absolute;
			top:30upx;
			right:26upx;
		}
		.u-p{
			top:70upx;
			display: flex;
			background: none;
		}
		.user-iccid{
			padding-top:10upx;
			.iccid{
				color:#fff;
				font-size:32upx;
				font-family: PingFangSC, PingFang SC;
				margin-bottom:4px;
			}
			
		}
		.user-status{
			text{
				color:#fff;
				font-size:20upx;
				&:first-child{
					margin-right:30upx;
					padding-left:28upx;
					background: url('../../static/img/icon22.png')no-repeat left center;
					background-size:24upx 20upx;
				}
				&:last-child{
					padding-left:26upx;
					background: url('../../static/img/icon23.png')no-repeat left center;
					background-size:22upx 22upx;
				}
			}
		}
	}
	.pack{
		margin:0 14px;
		padding:40upx 14px;
		margin-top:-100px;
		position: relative;
		background:#fff;
		border-radius:20upx;
	}
	.u-top{
		display: flex;
		margin-bottom:12upx;
		justify-content: space-between;
		.total{
			color:#999;
			font-size:28upx;
			font-family: PingFangSC, PingFang SC;
			text{
				margin-left:8upx;
				color:#333;
				font-family: HarmonyOS_Sans_SC_Bold;
			}
		}
		.date{
			font-size:24upx;
			color: #999;
		}
		&:last-child{
			margin-top: 12upx;
			margin-bottom: 0;
		}
	}
	.pack-detail{
		margin:20upx 28upx 0;
		background:#fff;
		border-radius:20upx;
		padding:32upx 28upx;
		.title{
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #28292D;
			line-height: 20px;
			margin-bottom:28upx;
		}
		.u-bot{
			margin-bottom:52upx;
			&:last-child{
				margin-bottom:0;
			}
		}
		.pack-btn{
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width: 142px;
			height: 44px;
			background: linear-gradient(270deg, #6BB5FB 0%, #397EF5 100%);
			border-radius: 22px;
			margin:64upx auto;
			text-align: center;
			line-height:44px;
		}
	}
	.popupw{
		::v-deep .u-popup__content{
			width:80%;
			padding:30upx;
			.massage{
				color: #646668;
				font-size: 28upx;
			}
			.btn-flex{
				 display: flex;
				margin-top:40upx;
				.u-button{
					width:45%;
					height:100upx;
				}
			}
			.title{
				margin-bottom:40upx;
				font-size:36upx;
			}
		}
	}
	.popup1{
		::v-deep .u-popup__content{
			width:580upx;
			height:806upx;
			border-radius: 20upx;
			.popup-title{
				height: 58upx;
				background: url('../../static/img/top-bg.png') no-repeat center center;
				background-size:100% 100%;
				text-align: center;
				font-size:38upx;
				font-weight: 600;
				padding-top:44upx;
			}
			.iccid-list{
				height:550upx;
				overflow: auto;
				.iccid-items{
					margin:0 26upx;
					margin-top:26upx;
					text-align: center;
					height:120upx;
					border: 1upx solid #EEF4FF;
					border-radius:20upx;
					line-height:120upx;
					color:#94959A;
					font-size:28upx;
				}
				.active{
					border:1upx solid #50A9FF;
				}
			}
			.popup-btn{
				display: flex;
				margin: 0 28upx;
				margin-top:26upx;
				view{
					width: 242upx;
					height: 88upx;
					border-radius:14upx;
					font-size:30upx;
					text-align: center;
					line-height:88upx;
				}
				.popupClose{
					background: #F5F5F5;
					color: #666666;
				}
				.popupSave{
					color: #fff;
					background: linear-gradient(90deg, #50A9FF 0%, #1772FF 100%);
					margin-left:20upx;
				}
			}
		}
	}
}
</style>